<template>
  <div id="pdf">
    <el-button icon="el-icon-full-screen" type="primary" v-on:click="showdocFullScreen"/>
    <pdf :src="path" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf">
    </pdf>
    <!-- 加载未完成时，展示进度条组件并计算进度 -->
    <div class="progress"
         v-show="loadedRatio!==1">
      <el-progress type="circle"
                   :width="70"
                   color="#53a7ff"
                   :percentage="Math.floor(loadedRatio * 100)"></el-progress>
      <br>
      <!-- 加载提示语 -->
      <span>{{remindShow}}</span>
    </div>
    <ul class="footers">
      <li :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
        <p>下一页</p>
      </li>
      <li :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
        <p>上一页</p>
      </li>
      <a :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="shoppingPage(0)">
        <p>下载DOCX全文</p>
      </a>
    </ul>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import {eventBus} from "../../../assets/Bus";
export default {
  name: "Elasticsearch",
  props: {
    // 当前pdf的路径
    pdfUrl: {
      type: String,
      default: '',
    }
  },
  components: {
    pdf
  },
  data() {
    return {
      // ----- loading -----
      remindText: {
        loading: '加载文件中，文件较大请耐心等待...',
        // refresh: '若卡住不动，可刷新页面重新加载...'
      },
      remindShow: '加载文件中，文件较大请耐心等待...',
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      path: "",
      scale: 100, //放大系数
      idx: -1,
      clauseTitle: "",
      loadedRatio: 0
    }
  },
  methods: {
    showdocFullScreen(){
      var docName = this.$route.query.params;
      console.log("showdocFullScreenvalue:"+docName)
      //传文档名字带时间戳
      eventBus.$emit("showDocFullScreen", docName)
      this.$router.push({path:'/DocFullScreen',query:{params:docName}})
        // .catch(err => { console.log(err) });
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if(val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if(val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    shoppingPage(val){
      // alert(123)
      var docName = this.$route.query.params;
      //根据商品名查id
      this.$http.get('http://honglitech.cn:8500/detailByName/'+ docName, {emulateJSON: true }).then(response => {
        var data = response.data
        if (data.code == 200) {
          //线上链接是80端口，他机访问，本机不能访问
          var url = 'http://honglitech.cn/productDetail/' + data.data.id
          //本地链接是8081端口，本机访问，他机不能访问
          // var url = 'http://honglitech.cn:8081/productDetail/' + data.data.id
          //pc/移动跳转
          location.href= url;
          //只支持pc端跳转
          // window.open(url)
        } else {
          console.log('失败')
        }
      })
    },
    goBack() {
      this.$router.go(-1);
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    //放大
    scaleD() {
      this.scale += 5;
      // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
    },

    //缩小
    scaleX() {
      if(this.scale == 100) {
        return;
      }
      this.scale += -5;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
      // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
    },
    showDoc(params){
    },
    // getNumPages(url) {
    //   var loadingTask = pdf.createLoadingTask(url)
    //   loadingTask.promise.then(pdf => {
    //     this.pdfSrc = loadingTask
    //   }).catch((err) => {
    //     console.error('pdf加载失败')
    //   })
    // }
  },
  created() {
    //页面刚加载进来时
    var docName = this.$route.query.params;
    //生产路径
    // this.path = "static/"+docName+".pdf";
    //本地路径1，在static下可以读取，在assets下不可阅读
    // this.path = "../../../static/"+docName+".pdf";
    //test
    // this.pdfUrl = "http://1.117.149.191:100/literature/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0-%E6%88%90%E4%B8%BA%E5%8F%B2%E8%92%82%E5%A4%ABpart1_1675522538388.pdf";
    //解决跨域问题
    this.path = "http://1.117.149.191:100/literature/" + docName + ".pdf";
    // this.path = "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf";

    //路径2，绝对路径未测成功
    // this.path = "/Users/wanghong/IdeaProjects/testweb/static/"+docName+".pdf";

    eventBus.$on("showDocDetail", params => {
      //生产路径
      // this.path = "static/"+params+".pdf";
      // this.path = require("@/assets/src-pdf/"+params+".pdf")

      //本地路径1
      // this.path = "../../../static/"+params+".pdf";
      //路径2
      //test
      this.path = "http://1.117.149.191:100/literature/"+params+".pdf";
    });
  },
  mounted() {
    // 更改 loading 文字
    this.intervalID = setInterval(() => {
      this.remindShow === this.remindText.refresh
        ? this.remindShow = this.remindText.loading
        : this.remindShow = this.remindText.refresh
    }, 4000)
    // 监听滚动条事件
    this.listenerFunction()
  }
}
</script>

<style scoped>
.el-textarea__inner{
  font-family: "Microsoft YaHei";
  size: 1rem;
  font-size: 15px;
}
</style>
